<template>
  <a-card :bordered="false" class="card-area">
    <search ref="search" :config="searchConfig" @search="search" @getHeight="getHeight"/>
    <div class="page_table">
      <vxe-grid
        ref="xGrid"
        :border="true"
        :resizable="true"
        :showOverflow="true"
        size="mini"
        :loading="loading"
        :height="pageHeight-seachHeight-90"
        :align="left"
        :columns="columns"
        :data="dataSource"
        :toolbar-config="tableToolbar"
        @radio-change="radioChangeEvent"
        :radio-config="{ trigger: 'row'}"
      >
        <template #toolbar_buttons>
          <div class="table-operator">
            <a-button  @click="handleAdd" type="primary">新增</a-button>
            <a-button  type="primary" @click="batchDel">删除</a-button>
<!--            <a-button v-has="'roleUserList:modal'" type="primary" @click="handleExportXls('角色管理')">模板下载</a-button>-->
<!--            <a-upload v-has="'roleUserList:import'" name="file" :showUploadList="false" :multiple="false"-->
<!--                      :headers="tokenHeader" :action="url.importExcelUrl" @change="handleImportExcel">-->
<!--              <a-button type="primary">导入</a-button>-->
<!--            </a-upload>-->
<!--            <a-button v-has="'roleUserList:export'" type="primary" @click="downExportXls('cn_role_service' )">导出-->
<!--            </a-button>-->
          </div>
        </template>
        <template #detail="{row}">
          <a @click='handleAdd(row,"详情",true,true)'>{{ row.bpmRoleCode }}</a>
        </template>
        <template #status="{row}">
          {{ row.status == 1?'启用':'停用' }}
        </template>
        <template #action="{ row:record }">
          <a @click='handleAdd(record,"编辑")'>编辑</a>
          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">
              更多
              <a-icon type="down"/>
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click="handlePosition(record)">职位配置</a>
              </a-menu-item>
              <a-menu-item v-has="'business:log'">
                <a href="javascript:;" @click='handleBusiness("角色管理",record)'>日志</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </template>
        <template #pager>
          <vxe-pager
            :layouts="['Total', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump','Sizes', 'FullJump']"
            :currentPage.sync="ipagination.current"
            :page-size.sync="ipagination.pageSize"
            :total="ipagination.total"
            :pageSizes="ipagination.pageSizeOptions"
            @page-change="handlePageChange">
          </vxe-pager>
        </template>
      </vxe-grid>
    </div>
    <!-- 右侧的角色权限配置 -->
    <form-add-edit ref="formAdd" @ok="modalFormOk"></form-add-edit>
    <user-role-modal ref="modalUserRole"></user-role-modal>
    <role-drawer ref="drawerUserRole"></role-drawer>
    <business-log ref="businessLog"></business-log>
    <select-position-modal  modal-width="1200px" ref="selectPosition"  @ok="handelSaveDealer"></select-position-modal>
  </a-card>
</template>

<script>
import RoleDrawer from '@views/system/modules/RoleDrawer'
import UserRoleModal from '@page-modules/UserRoleModal'
import { PageListMixin } from '@/mixins/PageListMixin'
import JDate from '@/components/cn-form/JDate'
import FormAddEdit from '@comp/view/base-crud/form/FormAddEdit'
import { getAction } from '@api/manage'
import SelectPositionModal from '@views/activiti/form/SelectPositionModal'

export default {
  name: 'RoleList',
  mixins: [PageListMixin],
  components: {
    UserRoleModal,
    JDate,
    RoleDrawer,
    FormAddEdit,
    SelectPositionModal
  },
  data() {
    return {
      description: '流程角色管理页面',
      searchConfig: [
        {
          type: 'input',
          name: 'bpmRoleName',
          placeholder: '流程角色名称'
        }
      ],
      queryParam: { bpmRoleName: '', },
      // 表头
      columns: [
        { type: 'radio', width: 50, fixed: 'left' },
        {
          fixed: 'left',
          title: '流程角色编号',
          minWidth: 100,
          field: 'bpmRoleCode',
          slots: { default: 'detail' }
        },
        {
          title: '流程角色名称',
          minWidth: 100,
          field: 'bpmRoleName'
        },
        {
          title: '备注',
          minWidth: 100,
          field: 'remarks'
        },
        {
          title: '状态',
          minWidth: 100,
          field: 'status',
          slots: {default: 'status'}
        },
        {
          title: '创建人',
          align: 'left',
          minWidth: 80,
          field: 'createName'
        },
        {
          title: '创建时间',
          align: 'left',
          minWidth: 80,
          field: 'createTime'
        },
        {
          title: '更新人',
          align: 'left',
          minWidth: 80,
          field: 'updateName'
        },
        {
          title: '更新时间',
          align: 'left',
          minWidth: 80,
          field: 'updateTime'
        },
        {
          title: '操作',
          field: 'action',
          minWidth: 100,
          fixed: 'right',
          slots: { default: 'action' }
        }
      ],
      url: {
        list: '/role/cnBpmRole/findPageList',
        delete: '/role/cnBpmRole/delete',
        deleteBatch: '/role/cnBpmRole/deleteBatch',
        detail: '/role/cnBpmRole/getInfo',
        exportXlsUrl: '/cnRoleController/exportXls',
        importExcelUrl: window._CONFIG['domianURL'] + '/cnRoleController/importExcel',
      },
    }
  },
  computed: {},
  methods: {
    handlePerssion: function (roleId) {
      // alert(roleId);
      this.$refs.modalUserRole.show(roleId)
    },
    handleOpen(record) {
      this.$refs.drawerUserRole.edit(record)
    },
    async modalFormOk() {
      // 新增/修改 成功时，重载列表
      await this.loadData()
      this.$refs.formAdd.close()
    },
    async handleAdd(record = {}, title = '新增', disabled = false, disableSubmit = false) {
      if (record.id && this.url.detail) {
        const res = await getAction(this.url.detail, { id: record.id })
        if (res.success) {
          if (res.result) {
            record = res.result
          }
        }
      }
      let config = {
        title: title,
        width: 500,
        addOrUpdateUrl: `${window._CONFIG['domianURL']}/role/cnBpmRole/saveOrUpdate`,  //审核地址
        method: 'post',
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        list: [
          {
            label: '流程角色名称',
            type: 'input',
            placeholder: '流程角色名称',
            disabled: disabled,
            name: 'bpmRoleName',  // 后台接受字段
            check: { rules: [{ required: true, message: '' }] }
          },
          {
            label: '流程角色编码',
            type: 'input',
            placeholder: '流程角色编码',
            disabled: disabled,
            name: 'bpmRoleCode',  // 后台接受字段
            check: { rules: [{ required: true, message: '' }] }
          },
          {
            label: '备注',
            type: 'textarea',
            placeholder: '备注',
            disabled: disabled,
            name: 'remarks',  // 后台接受字段
          },
        ]
      }
      this.$refs.formAdd.edit(record, config)
      this.$refs.formAdd.disableSubmit = disableSubmit
    },
    async handlePosition(record){
      if (this.url.detail) {
        const res = await getAction(this.url.detail, { id: record.id })
        if (res.success) {
          if (res.result) {
            record = res.result
          }
        } else {
          this.$message.error(res.message)
        }
      }
      this.$refs.selectPosition.showModal(record)
    },

    onChangeDate(date, dateString) {
      console.log(date, dateString)
    },
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less'
</style>
